<template>
  <div class="sj-datetime">
    <van-popup v-model="showPicker" position="bottom" :close-on-click-overlay="false" @click-overlay="closePopup">
      <van-datetime-picker
        v-model="currentDate"
        type="datetime"
        title="选择完整时间"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>
  </div>
</template>

<script>
import { Popup, DatetimePicker } from 'vant'
import { parseTime } from '@/utils/common'
export default {
  components: {
    'van-popup': Popup,
    'van-datetime-picker': DatetimePicker
  },
  props: {
    showPicker: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      minDate: new Date(),
      maxDate: new Date(2999, 12, 31),
      currentDate: new Date()
    }
  },
  methods: {
    closePopup(e) {
      this.$emit('cancel',
        {
          showPicker: false
        })
    },
    onConfirm(value) {
      this.$emit('selected',
        {
          value: parseTime(value, '{y}-{m}-{d} {h}:{i}'),
          showPicker: false
        })
    },
    onCancel(value) {
      this.$emit('cancel',
        {
          showPicker: false
        })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
